<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.0.0.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>
    <script>
        $(function(){
            $('#content').fullpage({
                scrollingSpeed:500,
                paddingTop:300,
                afterLoad:function(anchorLink,index){
                    // 通过index 获取 当前的页数 默认从1开始
                    // 先将所有的h3标签的颜色清空   排他
                    $('h3').css({
                        color:'black'
                    });
                    // jq的eq方法 从0开始计算 当前的的h3变色
                    $('h3').eq(index-1).css({
                        color:'orange'
                    });
                }
            });
        });
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        h3{
            font-size: 100px;
            font-family: '华文琥珀';
            transition: all 1s;
        }
        .section{
            background-color: plum;
        }
    </style>
</head>
<body>
<div id="content">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>
</body>
</html>